<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>编辑个人资料</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/edit.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap">
          <div @click="goback" class="header-left">
            <i class="iconfont icon-pre"></i>
          </div>
          <h1 class="header-title">编辑个人资料</h1>
        </div>
      </header>
      <div class="flex-con">
        <div class="edit-info">
          <div class="input-wrap border-bottom"  @click="showActionSheet(5)">
            <div class="label avatar">头像</div>
            <img :src="avatar" alt="">
          </div>
          <div class="input-wrap border-bottom">
            <div class="label">昵称</div>
            <input v-model="form.name" type="text" placeholder="请填写昵称">
          </div>
          <div class="input-wrap border-bottom">
            <div class="label">职业</div>
            <input v-model="form.occupation" type="text" placeholder="请填写职业">
          </div>
          <div class="input-wrap border-bottom">
            <div class="label">身高</div>
            <input class="height" v-model="form.height" type="text" placeholder="请填写您的身高(cm)">
          </div>
          <div class="input-wrap border-bottom">
            <div class="label">体重</div>
            <input class="weight" v-model="form.weight" type="text" placeholder="请填写您的体重(kg)">
          </div>
          <div class="input-wrap border-bottom">
            <div class="label">生日</div>
            <input class="birthday" v-model="form.birthday" type="date" placeholder="请填写您的生日">
          </div>
          <div class="textarea-wrap border-bottom">
            <div class="label">个性签名</div>
            <textarea v-model="form.signature" placeholder="请填写个性签名"></textarea>
          </div>
        </div>
        <div class="btn-wrap">
          <button @click="edtiorSubmit" type="button" :disabled="isDisabled" :class="[!isDisabled ? 'btn-active' : 'btn']">提交</button>
        </div>
        <div v-if="FNImageClipShow" class="FNImageClip-control">
          <span @click="FNImageClip_cancel">取消</span>
          <span @click="FNImageClip_enter">确定</span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app, FNImageClip;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    FNImageClip = api.require('FNImageClip');
    app = new Vue({
      el: '#app',
      data: {
        form: {
          uid: $api.getStorage('uid'),
          name: '',
          occupation: '',
          signature: '',
          avatar: '',
          height: '',
          weight: '',
          birthday: '',
        },
        avatar: $api.getStorage('uavatar'),
        qiniuToken: '',
        FNImageClipShow: false,
        isDisabled: true,
      },
      created: function () {
        this.getUserInfo();
        this.getQiniuToken();
      },
      mounted: function () { },
      methods: {
        watchModel: function () {
          if (this.form.name == '' || this.form.occupation == '' || this.form.signature == '' || this.form.height == '' ||  this.form.weight == '' ||  this.form.birthday == '') {
            this.isDisabled = true;
          } else {
            this.isDisabled = false;
          }
        },
        // 获取页面传值
        getUserInfo: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: ''
          });
          api.ajax({
            url: baseUrl + 'user/index',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret.status == 200) {
              _this.avatar = ret.data.avatar;
              _this.form.name = ret.data.name;
              _this.form.signature = ret.data.signature;
              _this.form.occupation = ret.data.occupation;
              _this.form.height = ret.data.height;
              _this.form.weight = ret.data.weight;
              _this.form.birthday = ret.data.birthday;
            }
          })
        },

        // 获取七牛token
        getQiniuToken: function () {
          var _this = this;
          api.ajax({
            url: baseUrl + 'qiniu/token',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid')
              }
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.qiniuToken = ret.data[0];
            }
          })
        },

        showActionSheet: function (index) {
          var _this = this;
          _this.imgIndex = index;
          api.actionSheet({
            title: '',
            cancelTitle: '取消',
            destructiveTitle: '',
            buttons: ['拍照', '相册']
          }, function (ret, err) {
            if (ret) {
              if (ret.buttonIndex == 1) {
                _this.getImageFile('camera');
              }
              if (ret.buttonIndex == 2) {
                _this.getImageFile('library');
              }
            }
          });
        },

        getImageFile: function (type) {
          var _this = this;
          api.getPicture({
            sourceType: type,
            encodingType: 'png',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: false,
            saveToPhotoAlbum: false
          }, function (ret, err) {
            if (ret) {
              FNImageClip.open({
                rect: {
                  x: 0,
                  y: 0,
                  w: api.winWidth,
                  h: api.winHeight - 50
                },
                srcPath: ret.data,
                style: {
                  mask: 'rgba(0,0,0,0.5)',
                  clip: {
                    w: api.winWidth - 2,
                    h: api.winWidth - 2,
                    x: 1,
                    y: (api.winHeight - api.winWidth - 50) / 2,
                    borderColor: '#0f0',
                    borderWidth: 1,
                    appearance: 'rectangle'
                  }
                },
                mode: 'image',
                fixedOn: api.frameName
              }, function (ret, err) {
                if (ret.status) {
                  _this.FNImageClipShow = true;
                }
              });
            }
          });
        },

        FNImageClip_cancel: function () {
          this.FNImageClipShow = false;
          FNImageClip.close();
        },

        FNImageClip_enter: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: ''
          });
          FNImageClip.save({
            destPath: 'fs://imageClip/liaola_' + (+new Date()) + '.png',
            copyToAlbum: false,
            quality: 1
          }, function (ret, err) {
            if (ret) {
              if (ret.destPath == undefined) {
                api.hideProgress();
                api.toast({
                  msg: '图片保存失败'
                })
                this.FNImageClipShow = false;
                FNImageClip.close();
              } else {
                _this.uploadImg(ret.destPath)
              }
            } else {
              api.hideProgress();
              api.toast({
                msg: '图片保存失败'
              })
              this.FNImageClipShow = false;
              FNImageClip.close();
            }
          });
        },

        // 上传图片
        uploadImg: function (fileUrl) {
          var _this = this;
          api.ajax({
            url: qiniuBaseUrl,
            method: 'post',
            data: {
              values: {
                token: this.qiniuToken
              },
              files: {
                file: fileUrl
              }
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              _this.FNImageClipShow = false;
              FNImageClip.close();
              _this.form.avatar = ret.key;
              _this.avatar = qiniuImageUrl + ret.key;
            }
            if (err) {
              api.toast({
                msg: '网络错误，请稍后再试',
                duration: 2000,
                location: 'bottom'
              });
            }
          });
        },

        edtiorSubmit: function () {
          var _this = this;
          if (_this.form.name == '') {
            api.toast({
              msg: '请填写昵称',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          if (_this.form.occupation == '') {
            api.toast({
              msg: '请填写职业',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          if (_this.form.signature == '') {
            api.toast({
              msg: '请填写个性签名',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          if (_this.form.height == '') {
            api.toast({
              msg: '请填写您的身高',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          if (_this.form.weight == '') {
            api.toast({
              msg: '请填写您的体重',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          if (_this.form.birthday == '') {
            api.toast({
              msg: '请填写您的生日',
              duration: 2000,
              location: 'bottom'
            });
            return false;
          };
          api.ajax({
            url: baseUrl + 'user/store',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: _this.form
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              api.toast({
                msg: '提交成功',
                duration: 2000,
                location: 'bottom'
              });
              api.sendEvent({
                name: 'refreshMy',
              });
              setTimeout(function () {
                api.closeWin();
              }, 2000)
            } else if (ret.status == 400) {
              api.toast({
                msg: ret.message[0],
                duration: 2000,
                location: 'bottom'
              });
            }
          })
        },

        // 后退
        goback: function () {
          api.closeWin();
        },
      },
      watch: {
        "form.name": function () {
          this.watchModel()
        },
        "form.occupation": function () {
          this.watchModel()
        },
        "form.signature": function () {
          this.watchModel()
        },
        "form.height": function () {
          this.watchModel()
        },
        "form.weight": function () {
          this.watchModel()
        },
        "form.birthday": function () {
          this.watchModel()
        }
      }
    })
  }
</script>